<template>
    <div class="echarts">
    <chart :options="option"></chart>
    </div>
</template>
<style scoped>
    .echarts{
        width: 100%;
        height: 100%;
    }
</style>
<script type="text/ecmascript-6">

    import map from 'echarts/map/js/china';
    export default {
        watch: {
            dataMap(newVal, oldVal) {
                if (newVal !== oldVal) {
                    let finSeriesData = []
                    for (let i = 0; i < newVal.data.length; i++) {
                        finSeriesData.push({ 'name': newVal.data[i].province, 'value': newVal.data[i].provinum })
                    }
                    this.option.series[0].data = finSeriesData
                    this.option.visualMap.max = finSeriesData[0].value
                    // console.log(this.option)
                }
            }
        },
        props: ['dataMap'],
        data: function() {
            return {
                option: {
                    tooltip: {
                        trigger: 'item'
                    },
                    position: ['0%', '100%'],
                    grid: {
                        top: '1000',
                        left: '50',
                        right: '10',
                        bottom: '20',
                        containLabel: true
                    },
                    visualMap: {
                        min: 0,
                        max: 100,
                        left: 'left',
                        top: 'bottom',
                        color: ['#1ccada', '#d2f4f8'],
                        calculable: true,
                        show: false
                    },
                    series: [
                        {
                            type: 'map',
                            mapType: 'china',
                            roam: false,
                            itemStyle: {
                                normal: {
                                    areaColor: '#d2f4f8',
                                    borderColor: 'rgba(255,255,255,0.9)'
                                },
                                emphasis: {
                                    areaColor: '#2a333d'
                                }
                            },
                            label: {
                                emphasis: {
                                    show: false
                                }
                            },
                            data: [
                                { name: '北京', value: 34 },
                                { name: '天津', value: 0 },
                                { name: '上海', value: 0 },
                                { name: '重庆', value: 67 },
                                { name: '河北', value: 0 },
                                { name: '河南', value: 0 },
                                { name: '云南', value: 78 },
                                { name: '辽宁', value: 0 },
                                { name: '黑龙江', value: 1000 },
                                { name: '湖南', value: 0 },
                                { name: '安徽', value: 0 },
                                { name: '山东', value: 0 },
                                { name: '新疆', value: 0 },
                                { name: '江苏', value: 0 },
                                { name: '浙江', value: 0 },
                                { name: '江西', value: 0 },
                                { name: '湖北', value: 0 },
                                { name: '广西', value: 0 },
                                { name: '甘肃', value: 0 },
                                { name: '山西', value: 0 },
                                { name: '内蒙古', value: 0 },
                                { name: '陕西', value: 0 },
                                { name: '吉林', value: 0 },
                                { name: '福建', value: 0 },
                                { name: '贵州', value: 0 },
                                { name: '广东', value: 0 },
                                { name: '青海', value: 0 },
                                { name: '西藏', value: 0 },
                                { name: '四川', value: 0 },
                                { name: '宁夏', value: 0 },
                                { name: '海南', value: 0 },
                                { name: '台湾', value: 0 },
                                { name: '香港', value: 0 },
                                { name: '澳门', value: 0 }
                            ]
                        }
                    ]
                }
            }
        }
    }
</script>
